<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 一.基础选择器 */
        /* 1.标签选择器 */
        /* 能快速为同一类型的标签都选择出来,但是不能差异化选择 */
        div{
            color:red;
        }
        /* 2.类选择器 */
        /* 一个类可以被多个标签使用,一个标签也可以使用多个类 */
        /* 在CSS中, . 开头的就是"类" */
        .green{
            color:green;
        }
        .font{
            font-size:30px;
        }

        /* 3.id选择器 */
        #first{
            color:yellowgreen;
        }
        /* 4.通配符选择器 */
        /* 选中页面所有元素.存在的意义往往是"消除浏览器默认样式" */
        /* 不需要变元素引用 */
        *{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="first">Liyuu</div>
    <div class ="green">Liyuu</div>
    <div class ="green">Liyuu</div>
    <div>Liyuu</div>
    <div class="green font">Liyuu</div>
</body>
</html>